<template>
    <div class="bigBox">
        <div v-for="item in detailInfoAlls" class="contry">
            <h1> {{ item.title }}</h1>
            <div class="item">
                <ul v-for="info in item.data" v-slide-in>
                    <li>
                        <img src="/src/assets/images/hj.jpg" alt="">
                    </li>
                    <li v-for="detail in info">
                        {{ detail[0] + '：' + detail[1] }}
                    </li>
                </ul>
            </div>
        </div>
        <Loading :show="show"></Loading>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { goldPrice } from '@/api'
const detailInfoAlls: any = ref([])
const show = ref(true)
const goldPriceInfo = async () => {
    show.value = false
    const result = await goldPrice()
    for (const key in result) {
        if (key != 'code') {
            const obj: any = {
                title: key,
                data: processData(result[key])
            }
            detailInfoAlls.value.push(obj)
        }

    }
    show.value = true
}
const processData = (arr: any) => {
    let allArrs: any = []
    arr.forEach((el: any) => {
        let itemArrs: any = []
        for (const key in el) {
            const itemInfoArrs = [key, el[key]]
            itemArrs.push(itemInfoArrs)
        }
        allArrs.push(itemArrs)
    });
    return allArrs
}
onMounted(() => {
    goldPriceInfo()
})
</script>

<style scoped lang="scss">
.bigBox {
    width: 100%;
    height: 100%;
    @include scroll-bar();
    position: relative;

    .contry {
        padding: 10px;

        h1 {
            width: fit-content;
            padding: 10px;
            font-size: 25px;
            font-weight: bold;
            border-radius: 5px;
            background-color: var(--themeColor);
            color: white;
            box-shadow: 0 0 10px rgba(128, 128, 128, 0.315);
        }

        .item {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
            margin-bottom: 10px;

            ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
                border: 1px solid rgba(128, 128, 128, 0.431);
                padding: 10px;
                border-radius: 5px;
                font-size: 18px;

                li {
                    padding: 5px 20px;

                    img {
                        width: 100%;
                        scale: 0.9;
                    }
                }
            }
        }
    }
}
</style>